<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<!-- <myTabs :backgroundColor="#fff"></myTabs> -->
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#f0f0f0'"></myTabs>

		<view class="pages_intelligenceBox" v-if="informationList.length">
			<view class="pages_intelligenceItems"  @click.stop="goPath(item)"  v-for="(item,index) in informationList" :key="index">
				<view class="pages_intelligenceItemswei">
					 <view class="pages_intelligenceItemsLeft">
					 	<image mode="aspectFill" :src="item.coverImg"></image>
					 </view>
					 <view class="pages_intelligenceItemsRight">
					 	<view class="pages_intelligenceItemsRightText">{{item.title}}</view>
					 	<!-- 未解锁 -->
					 	<view class="pages_intelligenceItemsRightBox" v-if="item.conditionNum > item.joinNum">
					 		<span class="pages_intelligenceItemsRightBoxPrice">￥{{item.price}}</span>
					 		<view class="pages_intelligenceItemsRightBoxPath" v-if="item.lockStatus!=11 && item.lockStatus!=12">
					 			<span class="pages_intelligenceItemsRightBoxPathUnlock">已解锁</span>
					 			<view class="pages_intelligenceItemsRightBoxPathPlan">
					 				<span>{{(item.joinNum/item.conditionNum*100) | ff_num}}</span>
					 				<span>%</span>
					 			</view>
					 		</view>
							<view class="pages_intelligenceItemsRightBoxPath" v-else>
								<span class="pages_intelligenceItemsRightBoxPathUnlock">解锁失败</span>
								<view class="pages_intelligenceItemsRightBoxPathPlan">
									<span></span>
									<span></span>
								</view>
							</view>
					 	</view>
					 	
					 	<!-- 已解锁 -->
					 	<view class="pages_intelligenceItemsRightBox" v-else>
					 		<span class="pages_intelligenceItemsRightBoxTitle"></span>
					 		<view class="pages_intelligenceItemsRightBoxPath">
					 			<span>查看课程</span>
					 			<image src="/static/img/leftActionIcon.png"></image>
					 		</view>
					 	</view>
					 </view>
					 
				</view>
				<view v-if="item.conditionNum > item.joinNum && item.lockStatus!=11 && item.lockStatus!=12" class="pages_intelligenceItemsRightBoxwei wei" >
					<span @click.stop="ff_yes(item,index)">放弃解锁</span>
					<span @click.stop="goPath(item)">查看进度</span>
				</view>
			</view>
		</view>
		<view class="biaoyuBox" v-else>
			<image class="biaoyuImg" src="/static/img/kongIcon.png"></image>
			<p class="biaoyu">暂无课程～</p>
		</view>
		
		<!-- 删除订单-->
		<u-overlay :show="show" @click="show = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确认放弃解锁？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="show = false">取消</span>
					<span class="warpButtomYes" @click.stop="abandon">确定</span>
				</view>
			</view>
		</u-overlay>
	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				title: '我的课程',
				pageNum: 1,
				isPageSize: true,
				informationList: [],
				show: false,
				item: null,
				index: 0,

			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.init();
		},
		onReachBottom() {
			if(this.isPageSize){
				this.pageNum++;
				this.init();
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		filters:{
			ff_num(val){
				let nowVal = val >= 100 ? 100 : val
				return nowVal==100 ? nowVal : nowVal.toFixed(2)
			}
		},
		methods: {
			ff_yes(item,index){
				this.item = item;
				this.index = index;
				this.show = true;
			},
			abandon(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if(this.item.studyType==1){
					this.$api.informationStudyAbandon({studyId: this.item.studyId}).then(res=>{
						if(res.code==200){
							uni.showToast({
								icon:"none",
								title: '操作成功',
								mask: true
							});
							this.informationList[this.index].lockStatus=11;
							this.show = false
							
							
						}
					})
				}else if(this.item.studyType==2){
					this.$api.foodsStudyAbandon({studyId: this.item.studyId}).then(res=>{
						if(res.code==200){
							uni.showToast({
								icon:"none",
								title: '操作成功',
								mask: true
							});
							this.informationList[this.index].lockStatus=11;
							this.show = false

						}
					})
				}
				
				
			},
			goPath(item){
				uni.navigateTo({
					url: `/package/study/index?studyId=${item.studyId}&studyType=${item.studyType}`
				})
			},
			goPage(item){
				uni.navigateTo({
					url:`/package/intelligence/index?informationId=${item.informationId}`
				})
			},
			init(){
				let req = {
					pageSize : 10,
					pageNum:　this.pageNum
				}
				this.$api.userStudyGetList(req).then(res=>{
					console.log('res--->',res)
					if(res.code==200){
						this.informationList = [...this.informationList,...res.rows];
						if(this.informationList.length == res.total){
							this.isPageSize = false
						}
					}
				})
			},
			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		min-height: 100vh;
		box-sizing: border-box;

		.pages_intelligenceItemsRightBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
		}
		.warpButtomYes{
			color: #fdda2b !important;
		}
		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}
		
		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}
		
		.warpButtom {
			display: flex;
		
			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}
		
			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}
		
		.wei{
			border-top: 1rpx solid #eaeaea;
		}
		.pages_intelligenceItemsRightBoxwei{
			padding: 24rpx 0;
			display: flex;
			justify-content: flex-end;
			span{
				display: inline-block;
				width: 160rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 26rpx;
				font-family: 蘋方-簡;
			}
			span:nth-child(1){
				background-color: #efefef;
				color: #999999;
				margin-right: 24rpx;
			}
			span:nth-child(2){
				background-color: #ffda2d;
				color: #000;
				}
		}
	
		.pages_intelligenceItemsRightBoxPrice{
			height: 38rpx;
			font-size: 24rpx;
			font-family: DIN;
			font-weight: bold;
			line-height: 38rpx;
			color: #FF471C;
		}
		
		.pages_intelligenceItemsRightBoxPathPlan{
			display: flex;
			align-items: flex-end;
			span:nth-child(1){
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				transform: translateY(-4rpx);
			}
			span:nth-child(2){
				font-size: 22rpx;
				font-family: DIN;
				font-weight: bold;
			}
		}
		.pages_intelligenceItemsRightBoxTitle{
			background: transparent;
			border-radius: 8rpx;
			height: 42rpx;
			line-height: 42rpx;
			padding: 0 12rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFA102;
		}
		.pages_intelligenceItemsRightBoxPath{
			display: flex;
			align-items: center;
			span{
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #000000;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}
		.biaoyuBox{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 240rpx;
		}
		.biaoyuImg{
			width: 320rpx;
			height: 320rpx;
		}
		.biaoyu{
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #999;
			text-align: center;
		}
		.pages_intelligenceBox {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}
		.pages_intelligenceItems{
			border-radius: 24rpx;
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #fff;
			bbox-sizing: border-box;
			margin-bottom: 16rpx;
		}

		.pages_intelligenceItemswei {
			display: flex;
			padding-bottom: 24rpx;
			
		}
		

		.pages_intelligenceItemsLeft {
			flex: 0 0 192rpx;
			width: 192rpx;
			height: 144rpx;
			overflow: hidden;
			border-radius: 24rpx;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.pages_intelligenceItemsRight {
			flex: 1;

		}
.pages_intelligenceItemsRightBoxPathUnlock{
			display: inline-block;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #999999;
			margin-right: 4rpx;
		}
		.pages_intelligenceItemsRightText {
			height: 72rpx;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 32rpx;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
		 display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-bottom: 22rpx;
		}
	}
</style>
